<template>
  <div id="app" class="page--container">
    <v-touch
      class="page--content"
      @swipeleft="onAppSwipeleft"
      @swiperight="onAppSwiperight"
      @swipeup="onAppSwipeup"
      @swipedown="onAppSwipedown"
      threshold="10"
      :swipe-options="{velocity: 0.02}"
    >
      <keep-alive>
        <router-view />
      </keep-alive>
    </v-touch>
  </div>
</template>
<script>
export default {
  components: {},
  name: 'App',
  data() {
    return {}
  },
  async created() {},
  mounted() {},
  methods: {
    $processSlideback(evt, slideType) {
      var meta = this.$route.meta
      if (meta && meta.slideBack === false) {
        return
      }
      if (!slideType) {
        slideType = 'swiperight'
      }
      if (
        (!meta.slideBackType && slideType === 'swiperight') ||
        (meta.slideBackType && meta.slideBackType[slideType])
      ) {
        if (this.$route.query.reffer) {
          this.$router.repalce(this.$route.query.reffer)
        } else {
          this.$router.return()
        }
      }
    },
    onAppSwipeleft(evt) {
      this.$root.$emit('swipe', evt)
      this.$root.$emit('swipeleft', evt)
      this.$processSlideback(evt, 'swipeleft')
    },
    onAppSwiperight(evt) {
      this.$root.$emit('swipe', evt)
      this.$root.$emit('swiperight', evt)
      if (evt.isCancel) {
        return
      }
      this.$processSlideback(evt)
    },
    onAppSwipeup(evt) {
      if (evt.velocityY > -1) {
        return
      }
      this.$root.$emit('swipe', evt)
      this.$root.$emit('swipeup', evt)
      this.$processSlideback(evt, 'swipeup')
    },
    onAppSwipedown(evt) {
      if (evt.velocityY < 1) {
        return
      }
      this.$root.$emit('swipe', evt)
      this.$root.$emit('swipedown', evt)
      this.$processSlideback(evt, 'swipedown')
    }
  }
}
</script>

<style scoped lang="scss">
</style>
